<template>
    <van-dialog 
        class="z-dialog" 
        width="300"
        title="提示"
    >
        <div :class="`z-dialog-default ${align}`" v-if="content!=''">{{text}}</div>
        <div class="z-dialog-main">
            <slot></slot>
        </div>
        <template #footer>
            <z-button-group flex padding="0px 24px 20px">
                <z-button plain style="width:120px" @click="onCancel">取消</z-button>
                <z-button style="width:120px" @click="onConfirm">确认</z-button>
            </z-button-group>
        </template>
    </van-dialog>
</template>
<script setup>

const props = defineProps({
    content: {
        type: String,
        default: ''
    },
    align: {
        type: String,
        default: 'center'
    },
});

const text = ref(props.content)
const emits = defineEmits(['update:show', 'cancel', 'confirm']);

const onCancel = () => {
    emits('update:show');
    emits('cancel');
}

const onConfirm = () => {
    emits('confirm');
}

</script>
<style scoped lang="scss">
.z-dialog {

    &-default {
        padding: 15px 30px 26px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #CCCCCC;
        line-height: 24px;

        &.center {
            text-align: center;
        }
        &.left {
            text-align: left;
        }
    }
    &-main {
        padding: 0 24px;
    }
    // background: #45454D;
    // border-radius: 8px;

    // :deep(.van-dialog__header) {
    //     padding-top: 20px;
    //     padding-bottom: 0px;
    // }
}
</style>